<!-- home -->
<template>
  <div class="login-box">
    <div class="title">欢迎注册</div>
    <van-form @submit="handleRegister">
      <van-cell-group inset>
        <div style="display: flex;justify-content: space-around;">
          <p style="flex: 1;text-align: center;color: #646566;font-size: 16px;">头像</p>
          <div style="flex: 3;">
            <img :src="data.avatar" alt="" v-if="data.avatar" style="width: 100px;">
            <van-uploader :after-read="afterRead" v-else/>
          </div>
        </div>
        <van-field
          v-model="data.username"
          label="账号名称"
          placeholder="请输入账号名称"
          label-width="70px"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="data.password"
          label="密码"
          type="password"
          placeholder="请输入密码"
          label-width="70px"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
                v-model="data.desc"
                label="简介"
                placeholder="请输入个人简介"
                label-width="70px"
                :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="data.age"
          label="年龄"
          type="number"
          placeholder="请输入真实年龄"
          label-width="70px"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="roleName"
          is-link
          readonly
          label="角色"
          placeholder="请选择角色"
          label-width="70px"
          @click="showPicker = true"
          :rules="[{ required: true, message: '' }]"
        />

      </van-cell-group>
      <van-popup v-model="showPicker"  round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          value-key="name"
        />
      </van-popup>
      <div class="nouser">已有账号？<router-link :to="{ path: '/login' }">立即登录</router-link></div>
      <van-button round block type="info"  native-type="submit">立即注册</van-button>
    </van-form>
  </div>
</template>

<script>
import { register,getRoles, upload } from '@/api/common.js'
import encrypt from '@/utils/encrypt'
export default {
  data() {
    return {
     data:{
      name:'',
      username:'',
      password:'',
      age:'',
      roleId:null,
     },
      img: '',
     roleName:'',
     showPicker:false,
     columns:[]
    }
  },
  computed: {},
  mounted() {
    this.getColumns()
  },
  created() {
  },
  methods: {
    async getColumns() {
      await getRoles().then((res) => {
        this.columns = res.data
      })
    },
    async handleRegister() {
      const password = await encrypt(this.data.password)
      await register({...this.data,password}).then((res) => {
        if(res.code == 200){
          this.$notify({ type: 'success', message: res.message })
          this.$router.push({
            path:'/login'
          })
        }else{
          this.$notify(res.message)
        }

      })
    },
    onConfirm(value) {
      console.log(value)
      this.data.roleId = value.id
      this.roleName = value.name
      this.showPicker = false;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let formData = new FormData();
      formData.append("file", file.file);
      upload(formData).then(res => {
        if (res.code !== 200) {
          this.$toast.fail("图片上传失败,请重新上传!");
          return;
        }
        if (res.data) {
          this.$toast.success("图片成功!");
          // this.data.avatar = res.data
          this.$set(this.data, 'avatar', res.data)
        }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.login-box{
  width: 100%;
  height: 100vh;
  background: url("../../../static/images/bg2.jpg") center center no-repeat;
  background-size: 100% 100%;
  .nouser{
    margin: .1rem 0.5rem;
  }
  .title{
    text-align: center;
    font-size: .7rem;
    padding-top: 20%;
    margin-bottom: 2.5rem;
    // font-weight: bold;
  }
  button{
    width: 80%;
    margin:1rem auto 0;
  }
}
</style>
